<template>
  <div class="budget">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>预算管理</span>
        </div>
      </template>

      <el-form :model="budgetForm" label-width="150px">
        <el-form-item label="总预算（元）">
          <el-input-number
            v-model="budgetForm.totalBudget"
            :min="0"
            :max="50000"
            :step="100"
            style="width: 100%"
          />
        </el-form-item>

        <el-form-item label="交通预算占比">
          <el-slider
            v-model="budgetForm.transportRatio"
            :min="0"
            :max="100"
            show-input
            :format-tooltip="formatRatio"
          />
          <span class="ratio-text">{{ budgetForm.transportRatio }}%</span>
        </el-form-item>

        <el-form-item label="门票预算占比">
          <el-slider
            v-model="budgetForm.ticketRatio"
            :min="0"
            :max="100"
            show-input
            :format-tooltip="formatRatio"
          />
          <span class="ratio-text">{{ budgetForm.ticketRatio }}%</span>
        </el-form-item>

        <el-form-item label="餐饮预算占比">
          <el-slider
            v-model="budgetForm.foodRatio"
            :min="0"
            :max="100"
            show-input
            :format-tooltip="formatRatio"
          />
          <span class="ratio-text">{{ budgetForm.foodRatio }}%</span>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="saveBudget">保存预算</el-button>
          <el-button @click="resetBudget">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="budget-summary">
      <template #header>
        <div class="card-header">
          <span>预算分配</span>
        </div>
      </template>

      <el-descriptions :column="2" border>
        <el-descriptions-item label="总预算">
          ¥{{ budgetForm.totalBudget }}
        </el-descriptions-item>
        <el-descriptions-item label="交通预算">
          ¥{{ transportBudget }}
        </el-descriptions-item>
        <el-descriptions-item label="门票预算">
          ¥{{ ticketBudget }}
        </el-descriptions-item>
        <el-descriptions-item label="餐饮预算">
          ¥{{ foodBudget }}
        </el-descriptions-item>
      </el-descriptions>

      <div class="budget-chart">
        <el-progress
          type="dashboard"
          :percentage="totalRatio"
          :color="getProgressColor"
        >
          <template #default="{ percentage }">
            <span class="percentage-value">{{ percentage }}%</span>
            <span class="percentage-label">预算分配</span>
          </template>
        </el-progress>
      </div>
    </el-card>

    <el-card class="budget-history">
      <template #header>
        <div class="card-header">
          <span>历史路线费用</span>
        </div>
      </template>

      <el-table :data="routeHistory" stripe style="width: 100%">
        <el-table-column prop="created_at" label="规划时间" width="180" />
        <el-table-column prop="total_cost" label="总费用" width="120">
          <template #default="scope">
            ¥{{ scope.row.total_cost }}
          </template>
        </el-table-column>
        <el-table-column prop="total_distance" label="总距离" width="120">
          <template #default="scope">
            {{ scope.row.total_distance }} 公里
          </template>
        </el-table-column>
        <el-table-column prop="budget" label="预算" width="120">
          <template #default="scope">
            ¥{{ scope.row.budget }}
          </template>
        </el-table-column>
        <el-table-column label="预算使用率" width="150">
          <template #default="scope">
            <el-progress
              :percentage="(scope.row.total_cost / scope.row.budget * 100).toFixed(1)"
              :color="getBudgetUsageColor(scope.row.total_cost / scope.row.budget)"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import TravelAPI from '../api/travel'
import logger from '../utils/logger'

export default {
  name: 'Budget',
  setup() {
    const budgetForm = reactive({
      totalBudget: 1000,
      transportRatio: 30,
      ticketRatio: 50,
      foodRatio: 20
    })

    const routeHistory = ref([])

    const transportBudget = computed(() => {
      return (budgetForm.totalBudget * budgetForm.transportRatio / 100).toFixed(2)
    })

    const ticketBudget = computed(() => {
      return (budgetForm.totalBudget * budgetForm.ticketRatio / 100).toFixed(2)
    })

    const foodBudget = computed(() => {
      return (budgetForm.totalBudget * budgetForm.foodRatio / 100).toFixed(2)
    })

    const totalRatio = computed(() => {
      return budgetForm.transportRatio + budgetForm.ticketRatio + budgetForm.foodRatio
    })

    const formatRatio = (val) => {
      return `${val}%`
    }

    const getProgressColor = (percentage) => {
      if (percentage < 50) {
        return '#67c23a'
      } else if (percentage < 80) {
        return '#e6a23c'
      } else {
        return '#f56c6c'
      }
    }

    const getBudgetUsageColor = (ratio) => {
      if (ratio < 0.8) {
        return '#67c23a'
      } else if (ratio < 1.0) {
        return '#e6a23c'
      } else {
        return '#f56c6c'
      }
    }

    const saveBudget = () => {
      if (totalRatio.value !== 100) {
        ElMessage.warning('预算占比总和必须等于100%')
        return
      }
      ElMessage.success('预算设置已保存')
      // 这里可以调用API保存到后端
    }

    const resetBudget = () => {
      budgetForm.totalBudget = 1000
      budgetForm.transportRatio = 30
      budgetForm.ticketRatio = 50
      budgetForm.foodRatio = 20
    }

    const fetchRouteHistory = async () => {
      try {
        const data = await TravelAPI.getRouteHistory()
        routeHistory.value = Array.isArray(data) ? data : data.results || []
      } catch (error) {
        logger.error('获取路线历史失败:', error)
      }
    }

    onMounted(() => {
      fetchRouteHistory()
    })

    return {
      budgetForm,
      routeHistory,
      transportBudget,
      ticketBudget,
      foodBudget,
      totalRatio,
      formatRatio,
      getProgressColor,
      getBudgetUsageColor,
      saveBudget,
      resetBudget
    }
  }
}
</script>

<style scoped>
.budget {
  /* 南昌旅游特色：天空蓝渐变背景 */
  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 50%, #90CAF9 100%);
  min-height: 100vh;
  padding: 20px;
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.budget {
  max-width: 1200px;
  margin: 0 auto;
}

.budget :deep(.el-card) {
  border-radius: 12px;
  border: 1px solid rgba(200, 16, 46, 0.1);
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(227,242,253,0.8) 100%);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(200, 16, 46, 0.08);
  transition: all 0.3s ease;
}

.budget :deep(.el-card:hover) {
  box-shadow: 0 8px 24px rgba(200, 16, 46, 0.16);
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.3);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.ratio-text {
  margin-left: 10px;
  /* 赣江蓝主题色 */
  color: #1E88E5;
  font-weight: bold;
}

.budget-summary {
  margin-top: 20px;
}

.budget-chart {
  margin-top: 30px;
  text-align: center;
}

.percentage-value {
  display: block;
  font-size: 28px;
  /* 赣江蓝主题色 */
  color: #1E88E5;
}

.percentage-label {
  display: block;
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.budget-history {
  margin-top: 20px;
}
</style>

